<template>
	<view>
		<my-navbar :title="'加入班级'" :fns="c_navbar.fns" @handle="c_navbar.handle"></my-navbar>
		<view class="selectSquad">
			<view class="selectSquad-header">
				<view class="header-title">
					<text v-if="jxyUserInfo.name">{{ jxyUserInfo.name }}</text>
					<text v-else>--</text>
					<text>，您好！</text>
				</view>
				<view class="header-subtitle">请选择班级信息，获取自己的班级</view>
			</view>
			<view class="selectSquad-form">
				<view class="form-item" @click="i_school.clickItem">
					<view class="item-label">您的所属学校</view>
					<input class="item-value" :value="jxyUserInfo.schoolName" type="text" :disabled="true" placeholder="请选择您所属的学校" placeholder-style="color: #c3c3c3;" />
				</view>
				<view class="form-item" @click="i_squad.clickItem">
					<view class="item-label">您的所属班级</view>
					<view class="item-value-container">
						<input class="item-value" :value="squadName" type="text" :disabled="true" placeholder="请选择您所属的班级" placeholder-style="color: #c3c3c3;" />
						<image class="item-icon" src="/static/login/icon_right.png"></image>
					</view>
					<view class="item-error">{{ i_squad.error }}</view>
				</view>
				<view class="form-item none-border">
					<view class="item-label">您的身份</view>
					<view class="item-range">
						<view
							v-for="(i, j) in i_identity.range"
							:key="j"
							class="range-item"
							:class="[i_identity.data.educationIdentity === i.educationIdentity ? 'selected' : '']"
							@click="i_identity.clickItem(i.educationIdentity)"
						>
							{{ i.text }}
						</view>
					</view>
					<view class="item-error">{{ i_identity.error }}</view>
				</view>
			</view>
		</view>
		<!-- 浮动底部 START -->
		<view class="app-offset">
			<view class="loginSuccess-button"></view>
			<view v-if="skip" class="loginSuccess-button"></view>
			<safe-area></safe-area>
		</view>
		<view class="app-fixed-bottom" style="background-color: #FFFFFF;">
			<view class="loginSuccess-button app-button primary" :class="[l_isPass ? '' : 'disabled']" hover-class="hover" @click="clickConfirmButton">确定</view>
			<view v-if="skip" class="loginSuccess-button app-button" hover-class="hover" @click="clickSkipButton">跳过</view>
			<safe-area></safe-area>
		</view>
		<!-- 浮动底部 END -->
		<template>
			<!-- 请选择年级 -->
			<my-popup :custom="2" :show="p_grade.show" @handle="p_grade.handle">
				<view class="page-popup popup1">
					<view class="popup-title">
						<view class="title-center">请选择年级</view>
						<view class="title-side"><image class="side-icon" src="/static/img/icon_close.png" @click="p_grade.clickIcon"></image></view>
					</view>
					<scroll-view class="popup1-content" :scroll-y="true">
						<view
							v-for="(i, j) in p_grade.range"
							:key="j"
							:class="[i.gradeId === i_squad.data.gradeId ? 'active' : '']"
							class="content-item"
							hover-class="button-hover"
							@click="p_grade.clickItem(i)"
						>
							<view class="item-text">{{ i.gradeName }}</view>
						</view>
						<safe-area></safe-area>
					</scroll-view>
				</view>
			</my-popup>
			<!-- 请选择班级 -->
			<my-popup :custom="2" :show="p_squad.show" @handle="p_squad.handle">
				<view class="page-popup popup2">
					<view class="popup-title">
						<view class="title-center">请选择班级</view>
						<view class="title-side"><image class="side-icon" src="/static/img/icon_back.png" @click="p_squad.clickIcon"></image></view>
					</view>
					<view class="popup2-subtitle">所属年级：{{ p_grade.data.grade.gradeName }}</view>
					<scroll-view class="popup2-content" :scroll-y="true">
						<view
							v-for="(i, j) in p_squad.range"
							:key="j"
							class="content-item"
							:class="[i.id === i_squad.data.squadId ? 'active' : '']"
							hover-class="button-hover"
							@click="p_squad.clickItem(i)"
						>
							<view class="item-main">
								<view class="main-label">
									<text>{{ i.squadName }}班</text>
									<text v-if="i.classTeacherName">（班主任：{{ i.classTeacherName }}）</text>
								</view>
								<view v-if="i.isJoin === 'Y'" class="main-mark">已加入</view>
							</view>
							<view class="item-line"></view>
						</view>
						<safe-area></safe-area>
					</scroll-view>
				</view>
			</my-popup>
		</template>
	</view>
</template>

<script>
import form from '@/components/my-form/my-form.js';
import { mapState, mapActions } from 'vuex';
export default {
	data() {
		return {
			skip: false,
			c_navbar: {
				fns: ['clickLeft'],
				handle: (fn, e, payload) => {
					if (fn === 'clickLeft') this.c_navbar.handleClickLeft();
				},
				handleClickLeft: () => {
					if (this.skip) {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					} else {
						uni.navigateBack();
					}
				}
			},
			i_school: {
				clickItem: () => {
					this.$showToast('学校不可修改，如需修改请联系客服')
				}
			},
			i_squad: {
				data: {
					grade: '',
					gradeId: '',
					squad: '',
					squadId: ''
				},
				error: '',
				checkData: () => {
					return [
						() => {
							if (!this.squadName) return '请选择您所属的班级';
						}
					];
				},
				clickItem: async () => {
					uni.showLoading({
						mask: true
					});
					const context = this.i_squad;
					context.error = '';
					let res1;
					try {
						res1 = await this.$api.common.get_squad_select_list({
							syoufk: this.jxyUserInfo.schoolId
						});
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '获取年级列表失败');
						return;
					}
					this.p_grade.range = res1.result;
					this.p_grade.show = true;
					uni.hideLoading();
				}
			},
			i_identity: {
				range: [
					// {
					// 	text: '我是校长',
					// 	educationIdentity: 'headmaster'
					// },
					{
						text: '我是班主任',
						educationIdentity: 'class_teacher'
					},
					{
						text: '我是科任老师',
						educationIdentity: 'subject_teacher'
					}
				],
				data: {
					educationIdentity: ''
				},
				error: '',
				checkData: () => {
					const context = this.i_identity;
					return [
						() => {
							if (!context.data.educationIdentity) return '请选择您的身份';
						}
					];
				},
				clickItem: educationIdentity => {
					const context = this.i_identity;
					context.error = '';
					context.data.educationIdentity = educationIdentity;
				}
			},
			p_grade: {
				show: false,
				range: [],
				data: {
					grade: {}
				},
				handle: (fn, e, payload) => {
					if (fn === 'clickMask') this.p_grade.show = false;
				},
				clickItem: async grade => {
					uni.showLoading({
						mask: true
					});
					const context = this.p_grade;
					context.data.grade = grade;
					let res1;
					try {
						res1 = await this.$api.common.get_squad_select_list({
							syoufk: this.jxyUserInfo.schoolId,
							gradeId: grade.gradeId
						});
					} catch (err) {
						uni.hideLoading();
						this.$showToast(err.message || '获取班级列表失败');
						return;
					}
					this.p_squad.range = res1.result;
					this.p_grade.show = false;
					this.p_squad.show = true;
					uni.hideLoading();
				},
				clickIcon: () => {
					this.p_grade.show = false;
				}
			},
			p_squad: {
				show: false,
				range: [],
				handle: (fn, e, payload) => {
					if (fn === 'clickMask') this.p_squad.show = false;
				},
				clickItem: squad => {
					const grade = this.p_grade.data.grade;
					form.setItemData(this.i_squad, {
						grade: grade.gradeName,
						gradeId: grade.gradeId,
						squad: squad.squadName,
						squadId: squad.id
					});
					this.p_squad.show = false;
				},
				clickIcon: () => {
					this.p_squad.show = false;
					this.p_grade.show = true;
				}
			}
		};
	},
	computed: {
		...mapState({
			jxyUserInfo: state => state.User.userInfo.jxyUserInfo
		}),
		l_list() {
			return [this.i_squad, this.i_identity];
		},
		l_isPass() {
			return form.checkListData(this.l_list).length === 0;
		},
		squadName() {
			const context = this.i_squad;
			if (context.data.grade && context.data.squad) {
				return `${context.data.grade}${context.data.squad}班`;
			} else {
				return '';
			}
		}
	},
	methods: {
		...mapActions(['updateJxyUserInfo']),
		async clickConfirmButton() {
			let errors = [];
			errors = form.checkListData(this.l_list, true);
			if (errors.length) {
				const error = errors.find(i => i)[0];
				this.$showToast(error);
				return;
			}
			const listData = form.getListData(this.l_list);
			uni.showLoading({
				mask: true
			});
			let res1;
			try {
				res1 = await this.$api.user.join_squad({
					squad: listData.squadId,
					educationIdentity: listData.educationIdentity,
					teachSubject: this.jxyUserInfo.teachSubject
				});
			} catch (err) {
				uni.hideLoading();
				this.$showToast(err.message || '更新班级信息失败');
				return;
			}
			uni.hideLoading();
			try {
				this.updateJxyUserInfo();
			} catch (err) {}
			if (this.skip) {
				uni.reLaunch({
					url: '/pages/index/index'
				});
			} else {
				uni.navigateBack();
			}
		},
		clickSkipButton() {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}
	},
	onLoad(options) {
		this.skip = Boolean(options.skip);
	}
};
</script>

<style lang="less" scoped>
.selectSquad {
	padding: 0 30rpx;

	.selectSquad-header {
		margin-top: 60rpx;

		.header-title {
			font-size: 48rpx;
			font-weight: 500;
			color: #222222;
			margin-bottom: 10rpx;
		}

		.header-subtitle {
			font-size: 28rpx;
			color: #808080;
		}
	}

	.selectSquad-form {
		margin-top: 30rpx;

		.form-item {
			border-bottom: 2rpx solid #eeeeee;
			padding-top: 30rpx;
			padding-bottom: 40rpx;

			position: relative;

			&.none-border {
				border-bottom: none;
			}

			.item-value-container {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.item-label {
				font-size: 28rpx;
				color: #444444;
				padding-bottom: 10rpx;
			}

			.item-value {
				font-size: 32rpx;
				color: #222222;
			}

			.item-icon {
				width: 13rpx;
				height: 23rpx;
			}

			.item-range {
				padding-top: 10rpx;
				display: flex;
				flex-wrap: wrap;

				.range-item {
					border-radius: 32rpx;
					border: 2rpx solid #ebecee;
					margin-right: 15rpx;
					margin-bottom: 15rpx;
					padding: 15rpx 30rpx;

					font-size: 28rpx;
					color: #222222;

					&.selected {
						font-weight: 500;
						color: #ff6600;
						border: 2rpx solid #ff6600;
					}

					&.input {
						width: 170rpx;
					}
				}
			}

			.item-error {
				font-size: 28rpx;
				color: #ff0000;

				position: absolute;
				bottom: 10rpx;
			}
		}
	}
}

.loginSuccess-button {
	height: 88rpx;
	border-radius: 44rpx;
	background-color: #eeeeee;
	margin: 0 30rpx 30rpx 30rpx;

	font-size: 32rpx;
	color: #222222;

	display: flex;
	justify-content: center;
	align-items: center;

	&.primary {
		background-color: #ff6600;
		color: #ffffff;
	}
}

.page-popup {
	height: 750rpx;
	background-color: #ffffff;
	border-radius: 30rpx 30rpx 0 0;

	display: flex;
	flex-direction: column;

	.popup-title {
		height: 120rpx;
		border-bottom: 2rpx solid #e3e4e6;

		position: relative;

		font-size: 36rpx;
		color: #222222;

		display: flex;
		align-items: center;
		justify-content: flex-end;

		.title-center {
			text-align: center;

			position: absolute;
			left: 0;
			right: 0;
		}

		.title-side {
			z-index: 1;

			position: absolute;
			left: 0;
			right: 0;

			display: flex;
			align-items: center;

			.side-icon {
				transition: all 0.3s;

				&:active {
					opacity: 0.5;
				}
			}
		}
	}
}

.popup1 {
	.title-side {
		justify-content: flex-end;

		.side-icon {
			width: 24rpx;
			height: 24rpx;
			padding: 30rpx;
		}
	}

	.popup1-content {
		flex: 1;
		overflow: scroll;

		font-size: 32rpx;
		color: #222222;

		.content-item {
			line-height: 120rpx;
			transition: all 0.3s;

			&.active {
				color: #ff6600;
			}

			.item-text {
				margin-left: 30rpx;
				border-bottom: 2rpx solid #e3e4e6;
			}
		}
	}
}

.popup2 {
	.side-icon {
		width: 14rpx;
		height: 24rpx;
		padding: 30rpx;
	}

	.popup2-subtitle {
		height: 72rpx;
		font-size: 32rpx;
		color: #222222;

		padding: 0 30rpx;
		display: flex;
		align-items: center;
	}

	.popup2-content {
		flex: 1;
		overflow: scroll;
		line-height: 120rpx;

		.content-item {
			font-size: 32rpx;
			color: #222222;

			transition: all 0.3s;

			&.active {
				color: #ff6600;
			}

			.item-main {
				padding: 0 30rpx;

				display: flex;
				align-items: center;
				justify-content: space-between;

				.main-mark {
					width: 120rpx;
					height: 56rpx;
					background-color: #ff6600;
					border-radius: 30rpx;

					font-size: 28rpx;
					color: #ffffff;

					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.item-line {
				height: 2rpx;
				background-color: #e3e4e6;
				margin-left: 30rpx;
			}
		}
	}
}
</style>
